﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Manage/Views/Shared/_SubPage.cshtml";
}
@section Header{}
@section Footer{
    <script type="text/javascript">
        var ejApp = angular.module('ejapp', ['angular-icheck']);
        ejApp.controller('mainCtrl', ['$scope', '$http', function ($scope, $http) {
            var idStr = 'Id';                    //Id的字符串
            var loadUrl = '/Manage/RoleInfo/Paging';
            var addUrl = '/Manage/RoleInfo/Add';
            var updateUrl = '/Manage/RoleInfo/Update';
            var updatesUrl = '/Manage/RoleInfo/Updates';
            var removeUrl = '/Manage/RoleInfo/Remove';
            var removesUrl = '/Manage/RoleInfo/Removes';
            $scope.subject = '权限角色';                   //当前页的主题名称

            $scope.sIndex = -1;                         //当前选中的行号
            $scope.eModel = {};                         //当前编辑的对象模型
            $scope.datas = [];                          //当前列表显示的对象数组
            $scope.menuDatas=@MvcHtmlString.Create(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.MenuDatas));
            $scope.pIndex = 1;                          //当前显示的页索引
            $scope.tPages = 0;                          //当前共有多少页
            $scope.tModels = 0;                         //当前共有多少个对象
            $scope.pSize = 20;                          //当前每页显示多少个对象
            $scope.pSizes = EJ.pageSizes;               //允许分页的数量的数组
            $scope.navIndexes = [];                     //分页导航器显示的页号数组
            $scope.query = {};                          //查询条件对象
            $scope.sortP = '';                          //排序属性
            $scope.sortD = '';                          //排序方向
            $scope.onSubmit = false;                    //是否提交

            $scope.gotoPrePage = function () { if ($scope.pIndex > 1) { $scope.pIndex--; $scope.load(); } }
            $scope.gotoNextPage = function () { if ($scope.pIndex < $scope.tPages) { $scope.pIndex++; $scope.load(); } }
            $scope.gotoFirstPage = function () { if ($scope.pIndex > 1) { $scope.pIndex = 1; $scope.load(); } }
            $scope.gotoLastPage = function () { if ($scope.pIndex < $scope.tPages) { $scope.pIndex = $scope.tPages; $scope.load(); } }
            $scope.gotoPageBy = function (i) { if (i >= 1 && i <= $scope.tPages) { $scope.pIndex = i; $scope.load(); } }
            $scope.$watch('pSize', function () { $scope.pIndex = 1; $scope.load(); });                              //会导致初始化加载
            $scope.search = function () { $scope.pIndex = 1; $scope.sortD = ''; $scope.sortP = ''; $scope.load(); }
            $scope.reSearch = function () { $scope.query = {} }
            $scope.doOrder = function (p) { if ($scope.sortP == p) { $scope.sortD = ($scope.sortD == 'asc' ? 'desc' : 'asc'); } else { $scope.sortP = p; $scope.sortD = 'asc'; } $scope.load(); };
            $scope.doSelect = function (data, e) { if (data.length > 0) { data.forEach(function (o) { o.Checked = e; }); } }
            $scope.doReSelect = function (data) { if (data.length > 0) { data.forEach(function (o) { o.Checked = !o.Checked; }); } }
            $scope.load = function () {
                //数据加载
                var req = {                             //组装请求参数
                    PageIndex: $scope.pIndex,
                    PageSize: $scope.pSize,
                    Query: $scope.query,
                    SortProperty: $scope.sortP,
                    SortDirection: $scope.sortD
                };
                showLoading();
                $http.post(loadUrl, req)
                    .success(function (rsp) {
                        if (rsp.Success) {
                            $scope.datas = rsp.Models;
                            $scope.tPages = rsp.TotalPages;
                            $scope.tModels = rsp.TotalModels;
                            $scope.navIndexes = EJ.getPageIndexes($scope.pIndex, $scope.tPages, 5);
                        } else {
                            EJ.showError(rsp.Message);
                        }
                        hideLoading();
                    })
                    .error(errorFn);
            };
            $scope.doAdd = function () {                    //添加
                $scope.sIndex = -1;
                $scope.onSubmit = false;
                $scope.eModel = {  'IsEnabled': true,'AddTime':EJGetDateNow() }
                $("#ulIsShow").find("input[name='Jurisdiction']").each(function (index, item) {
                    return $(item).removeAttr("checked")
                })
                $('#modal-edit').modal();
            };
            $scope.save = function (valid) {
                //保存
                if ($scope.menuDatas.length == 0) return;
                var ids = [];
                for (var i = 0; i < $scope.menuDatas.length; i++) {
                    if($scope.menuDatas[i].Children!=undefined)
                    {
                        $scope.menuDatas[i].Children.forEach(function (o) { if (o.Checked) { ids.push(o['ID']); } });
                    }
                }
                $scope.onSubmit = true;
                if (!valid) return;
                var Jurisdiction = "Home";
                for (var i = 0; i < ids.length; i++) {
                    Jurisdiction=Jurisdiction+','+ids[i];
                }
                $scope.eModel.Jurisdiction = Jurisdiction;
                showLoading();
                var isAdd = $scope.sIndex == -1;
                var url = isAdd ? addUrl : updateUrl;
                $http.post(url, $scope.eModel)
                    .success(function (rsp) {
                        if (rsp.Success) {
                            EJ.showSuccess("保存成功!");
                            if (isAdd) {
                                $scope.eModel.Id = rsp.Message;
                                $scope.datas.push($scope.eModel);
                                $scope.tModels++;
                            } else {
                                $scope.datas[$scope.sIndex] = $scope.eModel;
                            }
                            $('#modal-edit').modal('hide');
                        } else {
                            EJ.showError(rsp.Message);
                        }
                        hideLoading();
                    })
                    .error(errorFn)


            }
            $scope.doRemove = function (o) {                //删除指定对象
                EJ.confimWarn('确定要删除指定的' + $scope.subject + '吗?', function () {
                    $http.post(removeUrl, { "id": o[idStr] })
                    .success(function (rsp) {
                        if (rsp.Success) {
                            EJ.showSuccess("删除成功");
                            $scope.datas.remove(o);
                            $scope.tModels--;
                        } else {
                            EJ.showError(rsp.Message);
                        }
                    })
                    .error(errorFn);
                });
            }
            $scope.doRemoves = function () {                //批量删除选择对象
                if ($scope.datas.length == 0) return;
                var ids = []; $scope.datas.forEach(function (o) { if (o.Checked) { ids.push(o[idStr]); } });
                var length = ids.length;
                if (length > 0) {
                    EJ.confimWarn('确定要删除选中的' + length + '条' + $scope.subject + '记录吗?', function () {
                        $http.post(removesUrl, { "ids": ids })
                        .success(function (rsp) {
                            if (rsp.Success) {
                                EJ.showSuccess("删除成功");
                                $scope.tModels -= length;
                                $scope.datas = $scope.datas.filter(function (o) { return o.Checked == undefined || o.Checked == false; });
                            } else {
                                EJ.showError(rsp.Message);
                            }
                        })
                        .error(errorFn);
                    });
                } else {
                    EJ.toastrInfo("请选择要操作的" + $scope.subject + "！");
                }
            }
            $scope.doUpdate = function (o) {            //编辑
                $scope.sIndex = $scope.datas.indexOf(o);
                $scope.onSubmit = false;
                $scope.eModel = angular.copy(o);
                if ($scope.eModel.Jurisdiction.length > 0) {
                    var showList=[];
                    for (var i = 0; i < $scope.menuDatas.length; i++) {
                        if($scope.menuDatas[i].Children!=undefined)
                        {
                            $scope.menuDatas[i].Children.forEach(function (o)
                            {
                                o.Checked = false;
                            });
                        }
                    }
                    showList = $scope.eModel.Jurisdiction.split(",")
                    for (var i = 0; i < showList.length; i++) {

                        for (var j = 0; j < $scope.menuDatas.length; j++) {
                            if($scope.menuDatas[j].Children!=undefined)
                            {
                                $scope.menuDatas[j].Children.forEach(function (o)
                                {
                                    if(o.ID==showList[i])
                                    {
                                        o.Checked = true;
                                    }
                                });
                            }
                        }
                    }
                }
                $('#modal-edit').modal();
            }
            $scope.doUpdates = function (p, v) { //批量编辑选择对象
                if ($scope.datas.length == 0) return;
                var ids = [];
                $scope.datas.forEach(function (o) { if (o.Checked) { ids.push(o[idStr]); } });
                var length = ids.length;
                if (length > 0) {
                    EJ.confimWarn('确定要批量编辑选中的' + length + '条' + $scope.subject + '记录吗?', function () {
                        $http.post(updatesUrl, { "Ids": ids, "Property": p, "Value": v })
                        .success(function (rsp) {
                            if (rsp.Success) {
                                EJ.showSuccess("编辑成功");
                                $scope.datas.forEach(function (item) { if (item.Checked == true && item[p] != v) { item[p] = v; } });
                            } else {
                                EJ.showError(rsp.Message);
                            }
                        })
                        .error(errorFn);
                    });
                } else {
                    EJ.toastrInfo("请选择要操作的" + $scope.subject + "！");
                }
            }
        }]).filter('convertDate', function () {
            var convertTime = function (date) {
                return EjConvertDateFormat(date, "yyyy年MM月dd日 HH:mm:ss");
            }
            return convertTime;
        });
    </script>
}
<div class="wrapper wrapper-content animated fadeInUp">
    <div class="row  animated slideInLeft">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5><i class="fa fa-search"></i>&nbsp;&nbsp;搜索栏</h5>
                    <div class="ibox-tools"><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></div>
                </div>
                <div class="ibox-content">
                    <form role="form" id="searchform">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>名称:</label>
                                    <input ng-model="query.Name" type="text" placeholder="输入关键字查询" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>状态:</label>
                                    <select class="form-control" ng-model="query.IsEnabled">
                                        <option value="">无</option>
                                        <option value="true">仅启用</option>
                                        <option value="false">仅禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-primary btn-sm" ng-click="search()">提交查询</button>&nbsp;
                                        <button type="reset" class="btn btn-default btn-sm" ng-click="reSearch()">重置查询</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row  animated slideInRight">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5><i class="fa fa-database"></i>&nbsp;&nbsp;{{subject}}管理</h5>
                    <div class="ibox-tools">
                        <button type="button" ng-click="doAdd()" class="btn btn-primary btn-xs">添加&nbsp;<i class="fa fa-plus"></i></button>
                        <button type="button" ng-click="doRemoves()" class="btn btn-danger btn-xs">删除&nbsp;<i class="fa fa-trash-o"></i></button>
                        <div class="btn-group">
                            <button type="button" data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">批量操作 &nbsp;<span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="" ng-click="doUpdates('IsEnabled',true)">全部启用</a>
                                </li>
                                <li>
                                    <a href="" ng-click="doUpdates('IsEnabled',false)">全部禁用</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover table-striped table-bordered table-advanced tablesorter" id="data_container">
                        <thead>
                            <tr>
                                <th class="text-center" width="30px">
                                    <div class="btn-group">
                                        <button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle"><span class="caret"></span></button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li>
                                                <a ng-click="doSelect(datas,true)">全选</a>
                                            </li>
                                            <li>
                                                <a ng-click="doSelect(datas,false)">全不选</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a ng-click="doReSelect(datas)">反选</a>
                                            </li>
                                        </ul>
                                    </div>
                                </th>
                                <th class="text-center">Id</th>
                                <th class="text-center">名称</th>
                                <th class="text-center">描述</th>
                                <th class="text-center">添加时间</th>
                                <th class="text-center" width="60px">状态</th>
                                <th class="text-center" width="130px">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in datas">
                                <td class="text-center"><input type='checkbox' icheck ng-model="item.Checked" /></td>
                                <td class="text-center" ng-bind="item.Id"></td>
                                <td class="text-center" ng-bind="item.Name"></td>
                                <td class="text-center" ng-bind="item.Remark"></td>
                                <td class="text-center" ng-bind="item.AddTime|convertDate"></td>
                                <td class="text-center">
                                    <span class="label label-sm label-primary" ng-show="item.IsEnabled">启用</span>
                                    <span class="label label-sm label-danger" ng-show="item.IsEnabled==false">禁用</span>
                                </td>
                                <td class="text-center">
                                    <button type='button' class='btn btn-info btn-xs' ng-click='doUpdate(item)'><i class='fa fa-edit'></i>&nbsp;编辑</button>&nbsp;
                                    <button type='button' class='btn btn-danger btn-xs' ng-click='doRemove(item)'><i class='fa fa-trash-o'></i>&nbsp;删除</button>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot ng-show="tModels==0">
                            <tr>
                                <td colspan="7"><p class="text-center">没有找到记录.</p></td>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="row" ng-show="tModels>0">
                        <div class="col-sm-6 form-inline">
                            <div class="form-group">
                                <label class="control-label"> 总 <span class="require">{{tPages}}</span>页  |  每页显示&nbsp;</label>
                                <select class="form-control input-xsmall input-sm input-inline" ng-model="pSize">
                                    <option value="{{item}}" ng-repeat="item in pSizes" ng-selected="item == pSize">{{item}}</option>
                                </select>
                                <label class="control-label">&nbsp; 条记录 | 共找到 <span class="require">{{tModels}} </span>条记录</label>
                            </div>
                        </div>
                        <div class="col-sm-6 text-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-white" ng-click="gotoFirstPage()" title="首页">
                                    <i class="fa fa-angle-double-left"></i>
                                </button>
                                <button type="button" class="btn btn-white" ng-click="gotoPrePage()" title="上一页">
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button ng-repeat="i in navIndexes" class="btn btn-white" ng-class="{'active':i==pIndex}" ng-click="gotoPageBy(i)">{{i}}</button>
                                <button type="button" class="btn btn-white" ng-click="gotoNextPage()" title="下一页">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                                <button type="button" class="btn btn-white" ng-click="gotoLastPage()" title="末页">
                                    <i class="fa fa-angle-double-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-edit" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="modal-stackable-label" aria-hidden="true" class="modal fade">
    <div class="modal-dialog modal-lg">
        <form name="eForm" ng-submit="save(eForm.$valid)" class="form-horizontal form-bordered form-row-stripped" role="form" novalidate>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" aria-hidden="true" class="close">&times;</button>
                    <h4 id="modal-stackable-label" class="modal-title">{{subject}}-编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="form-group" ng-class="{'state-error':eForm.Name.$invalid&&onSubmit}">
                                <label class="control-label">角色名称:<span class="require">*</span></label>
                                <input type="text" name="Name" ng-model="eModel.Name" ng-required="true" maxlength="50" class="form-control" />
                                <em ng-show="eForm.Name.$invalid&&onSubmit" class="invalid">必填字段!</em>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <p class="m-t">
                                <input id="cbIsEnabled" type="checkbox" icheck value="true" ng-model="eModel.IsEnabled" />
                                <label for='cbIsEnabled'>是否启用</label>
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="input-group">
                                <dl class="clear">
                                    <dd class="selected">
                                        <div class="skin-section">
                                            <h3>权限管理：</h3>
                                            <ul class="list text-left" style="list-style:none; ">
                                                <li class="col-md-12" ng-repeat="item in menuDatas" style="list-style:none; ">
                                                    <label>{{item.Title}}:</label>
                                                    <ul class="list text-left" style="list-style:none; ">
                                                        <li class="col-md-3" ng-repeat="i in item.Children" style="list-style:none; display:inline;">
                                                            <label for="{{i.ID}}">
                                                                <input type="checkbox" name="{{item.ID}}" id="{{i.ID}}" icheck ng-model="i.Checked">{{i.Title}}
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="control-label">备注:</label>
                                <textarea name="Remark" ng-model="eModel.Remark" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="btnSave" class="btn btn-primary">保存</button>
                    <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                </div>
            </div>
        </form>
    </div>
</div>
